import React, { useState } from 'react'
import { useRef } from 'react'

function App() {
    const constainerElementRef = useRef(null)
    // dom 模板的编译 -> 数据的浇灌 -> React.createElement 虚拟DOM + render + renderDOM
    const [message, setMessage] = useState("Click Button to get container width")
    const calculateContainerWdth = () => {
        setMessage(`Container width:
         ${constainerElementRef.current.clientWidth}`)
        
    }
    return (
        <div className='container' ref={constainerElementRef}>
            <h2>{message}</h2>
            <button onClick={calculateContainerWdth}>Calculate container width</button>
        </div>
    )
}

export default App